<template>
    <div class="wrap">
      <myHead title="拼团购"></myHead>
      <div class="top">
        <div class="msg">还差2人拼团成功，快邀请好友来参团吧>></div>
        <div class="shop">
            <div class="box">
              <img src="../../../static/img/shop6.png" alt="" class="shopImg">
              <div class="boxInfo">
                <div class="boxName">鲜果优精选水果盒子 各种新鲜 水果混搭 <p>3人团</p></div>
                <div class="infoBot">
                  <p class="boxGuige">葡萄 + 火龙果 + 西瓜 + 樱桃 500g</p>
                  <div class="boxMoney"><span>￥589.0</span><p>￥888.0</p></div>
                </div>
              </div>
            </div>
            <div class="boxTime">
              <img src="../../../static/img/zhongbiao.png" alt="">
              <p>拼团截止日期：<span>2020/05/01</span></p>
            </div>
        </div>
      </div>
      <div class="middle">
          <div class="mid_tit">----&nbsp;&nbsp;&nbsp;邀请好友参团&nbsp;&nbsp;&nbsp;----</div>
          <div class="mid_img">
            <div class="mid_img1"><img src="../../../static/img/uhead.jpg" alt=""><p>团长</p></div>
            <img src="../../../static/img/weizhi.png" alt="">
            <img src="../../../static/img/weizhi.png" alt="">
          </div>
<!--        <div class="mid_erro">-->
<!--          <img src="../../static/img/kuqi.png" alt="">-->
<!--          <p>不要灰心,再接再厉哦！</p>-->
<!--        </div>-->
          <div class="mid_btn">邀请好友开团</div>
      </div>

      <div class="bottom">
        <div class="mid_tit">----&nbsp;&nbsp;&nbsp;邀请好友参团&nbsp;&nbsp;&nbsp;----</div>
        <div class="itemWrap">
          <recommend v-for="(x,y) in recommendList" :data="x" :key="y"></recommend>
        </div>
      </div>
    </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import recommend from "../../components/ClientComponents/assembly/recommend";
    export default {
        name: "ptDetails",
        components:{
          myHead,
          recommend
        },
        data(){
          return {
            recommendList:[
              {mf:['98','10'],name:'砂锅红烧付竹鸡肉饭',details:'特色传统黑猪肉',money:'42.50',url:'../../static/img/shop1.png'},
              {mf:['58','4'],name:'哈根达斯草莓奶茶',details:'活虾速冻，肉质鲜美',money:'38.2',url:'../../static/img/shop3.png'},
              {mf:['98','10'],name:'砂锅红烧付竹鸡肉饭',details:'特色传统黑猪肉',money:'42.50',url:'../../static/img/shop1.png'},
              {mf:['58','4'],name:'哈根达斯草莓奶茶',details:'活虾速冻，肉质鲜美',money:'38.2',url:'../../static/img/shop3.png'},
              {mf:['98','10'],name:'砂锅红烧付竹鸡肉饭',details:'特色传统黑猪肉',money:'42.50',url:'../../static/img/shop1.png'},
              {mf:['58','4'],name:'哈根达斯草莓奶茶',details:'活虾速冻，肉质鲜美',money:'38.2',url:'../../static/img/shop3.png'}
            ]
          }
        },
      created() {
        this.$myAxios('addons/shopro/activity_groupon/detail','post',{
          id:this.$route.query.id,
          token:this.$store.state.userInfo.token_lt
        }).then( res=>{
          console.log(res.data.code);
          if(res.data.code == 1){
            // this.$router.push({
            //   name: 'groupOrder',
            //   query:{data:JSON.stringify(res.data.data)}
            // })
          }else{
            this.$myNotice(res.data.msg,2000);
          }
        })
      },
    }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.17rem;
    padding-top: .5rem;
    background-color: #E9F2F4;
  }
  .top {
    width: 100%;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }
  .msg {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .15rem;
    background-color: #FDD0D8;
    color: #FF7611;
    font-size:.15rem;
    line-height: .15rem;
    font-family:PingFang SC;
    font-weight:400;
  }

  .shop {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;
    background-color: #ffffff;
  }
  .box {
    width: 100%;
    height: 1.25rem;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .1rem;
  }
  .shopImg {
    width: 1.25rem;
    height: 1.25rem;
    border-radius:.1rem;
  }
  .boxInfo {
    width: calc(100% - 1.5rem);
    height: 100%;
    box-sizing: border-box;
    padding-top: .05rem;
    padding-bottom: .05rem;
    margin-left: .1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .infoBot {
    width: 100%;
    height: .45rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .boxName {
    max-height: .6rem;
    font-size:.15rem;
    line-height: .2rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .boxGuige {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .boxName>p {
    width:.36rem;
    height:.15rem;
    position: relative;
    top: -.01rem;
    background:rgba(255,28,28,1);
    border-radius:.02rem;
    color: #ffffff;
    line-height: .15rem;
    text-align: center;
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    display: inline-block;
    vertical-align: middle;
  }
  .boxGuige {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #9C9C9C;
  }
  .boxMoney {
    font-size:.16rem;
    font-family:Source Han Sans CN;
    font-weight:bold;
    color: #FF0000;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
  .boxMoney>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    text-decoration:line-through;
    color: #C9C9C9;
    margin-left: .1rem;
  }
  .boxTime {
    width:3.35rem;
    height:.4rem;
    box-sizing: border-box;
    border:.01rem solid rgba(245,242,237,1);
    border-radius:.2rem;
    margin: 0 auto;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: .13rem;
  }
  .boxTime>img {
    width: .23rem;
    height: .22rem;
    margin-right: .15rem;
  }
  .boxTime>p {
    font-size: .15rem;
    color: #8A857C;
  }
  .boxTime>p>span {
    color: #292621;
  }

  .middle {
    background-color: #ffffff;
    padding-bottom: .25rem;
    margin-bottom: .1rem;
  }
  .mid_tit {
    width: 100%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size:.16rem;
    color: #090909;
    font-family:PingFang SC;
    font-weight:500;
  }

  .mid_img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: .15rem;
  }
  .mid_img>img,.mid_img1>img {
    width: .4rem;
    height: .4rem;
    border-radius: 100%;
  }
  .mid_img1 {
    position: relative;
    width: .4rem;
    height: .4rem;
    font-size: 0;
  }
  .mid_img1>p {
    width:.34rem;
    height:.15rem;
    color: #ffffff;
    font-size:.1rem;
    text-align: center;
    line-height: .15rem;
    font-family:PingFang SC;
    font-weight:500;
    background:rgba(90,212,234,1);
    border-radius:.08rem;
    position: absolute;
    bottom: -.08rem;
    left: calc(50% - .17rem);
  }
  .mid_img>img:nth-child(2) {
    margin: 0 .15rem;
  }

  .mid_btn {
    width:2.1rem;
    height:.34rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.17rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    margin: .1rem auto 0;
    text-align: center;
    line-height: .34rem;
  }

  .mid_erro {
  display: flex;
    flex-flow: column;
    align-items: center;
  }
  .mid_erro>img {
    width: .4rem;
    height: .4rem;
    margin-bottom: .1rem;
  }
  .mid_erro>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF4A4A;
  }

  .bottom {
    background-color: #ffffff;
  }

  .itemWrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
</style>
